<template>
  <div class="marquee-container">
    <ul class="marquee_list" :class="{marquee_top:animate}">
      <li v-for="(item, index) in list" :key="index">
        <slot :row="item" :$index="index"></slot>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "textScroll",
    props: {
      list: {
        type: Array,
        default: []
      },
      viewNum: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        animate: false
      }
    },
    created: function () {
      if (this.list.length > 8) {
        setInterval(this.showMarquee, 1500)
      }
    },
    methods: {
      showMarquee: function () {
        this.animate = true;
        setTimeout(() => {
          this.list.push(this.list[0]);
          this.list.shift();
          this.animate = false;
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  ul, li {
    margin: 0;
    padding: 0;
  }

  .marquee-container {
    display: block;
    position: relative;
    width: 100%;
    height: 175px;
    overflow: hidden;
  }

  .marquee_list {
    list-style-type: none;
  }

  .marquee_top {
    transition: all 1s;
    margin-top: -24px
  }
</style>
